<template>
  <div class="body" ref="myElementBox">
    <div class="header">
      <div class="title">收费机电部数智综合管理平台</div>
      <div class="shadow">收费机电部数智综合管理平台</div>
      <div class="weather">{{moment().format('YYYY年MM月DD日')}}&nbsp;&nbsp;&nbsp;{{chineseWeekday}}&nbsp;&nbsp;&nbsp;{{moment().format('hh:mm')}}
        <!-- <div
          class="station-link" @click="bindStation"> </div> -->
      </div>
      <div class="date">
        <!-- 多云转晴&nbsp;&nbsp;&nbsp;10℃ ~ 12℃  -->
        <div class="signout" @click="bindExit"></div>
      </div>
    </div>
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="info">
      <div class="info-item" @click="bindShowDialog('companyAll','公司排行')">
        <img class="info-img" src="../../../assets/images/icon2.png" alt="">
        <div>
          <div class="info-num text-center">1</div>
          <div class="info-text">交控内排名</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon3.png" alt="">
        <div>
          <div class="info-num">{{unitConvert(percent)}}</div>
          <div class="info-text">年度收费目标(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon4.png" alt="">
        <div>
          <div class="info-num">{{unitConvert(grandTotal)}}</div>
          <div class="info-text">完成值(万元)</div>
        </div>
      </div>
      <div class="info-item">
        <img class="info-img" src="../../../assets/images/icon5.png" alt="">
        <div>
          <div class="info-num">{{  completionRate}}</div>
          <div class="info-text">完成率(%)</div>
        </div>
      </div>

    </div>
    <div class="bg-center" :style="{width:isFull?'100vw':'56.5625rem',height:isFull?'100%':'36.6875rem'}">
      <div class="close" @click="isFull=false" v-if="isFull">
        <Close style="color:#fff;font-size:26px" />
      </div>
      <div class="full" v-if="!isFull" @click="isFull=true"><img src="../../../assets/images/icon46.png" alt=""></div>
      <MapCanvas :width="isFull?'100vw':'56.5625rem'" :carouselHeight="carouselHeight" :height="isFull?'100%':'36.6875rem'" :isFull="isFull" />
    </div>

    <div class="gate-left">
      <div class="left-top">
        <div class="gate-title">
          <div class="text">收费人员配置</div>
        </div>

        <div class="top-statistics">
          <div class="statistics-item" @click.stop="bindShowDialog('all','总人数','sfrypztc')">
            <div class="statistics-num">1085</div>
            <div>总人数(人)</div>
          </div>
          <div class="statistics-item">
            <div class="statistics-num">728</div>
            <div>在岗人数(人)</div>
          </div>
        </div>
      </div>
      <div class="left-center">
        <div class="gate-title">
          <div class="text">车道配置及开启</div>
        </div>
        <div class="lane" @click.stop="bindShowDialog('line','车道配置及开启','cdtc')">
          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon10.png" alt="">车道数</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num"><span class="text-white">{{lineInfo?.cdsrk||0}}</span></span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num"><span class="text-white">{{lineInfo?.cdsck||0}}</span></span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon11.png" alt="">今日开放车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">{{lineInfo?.jrkfcdrk||0}}</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">{{lineInfo?.jrkfcdck||0}}</span>
            </div>
          </div>

          <div class="lane-item">
            <div class="lane-title"><img src="../../../assets/images/icon12.png" alt="">今日开放人工车道</div>
            <div class="lane-opt">
              <span>入口</span>
              <span class="opt-num">{{lineInfo?.jrkfrgcdrk||0}}</span>
            </div>
            <div class="lane-opt">
              <span>出口</span>
              <span class="opt-num">{{lineInfo?.jrkfrgcdck||0}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="check-all tabflex">
        <div class="flex ">
          <div class="gate-title">
            <div class="text">收费稽核</div>
          </div>
          <div class="tab">
            <div :class="checkTab==1?'active':''" @click="getAudit(1)">当日</div>
            <div :class="checkTab==2?'active':''" @click="getAudit(2)">昨日</div>
          </div>
        </div>
        <div class="flex check" @click="bindLink('/audit/over')">
          <div class="flex-item">
            <img src="../../../assets//images/icon26.png" alt="">
          </div>
          <div class="flex-item">
            <div class="check-num">{{auditInfo.gdTotal||0}}</div>
            <div class="check-title">总工单量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">{{auditInfo.wcCount||0}}</div>
            <div class="check-title">完成量</div>
          </div>
          <div class="flex-item">
            <div class="check-num">{{auditInfo.wcRate||0}}<span>%</span></div>
            <div class="check-title">完成率</div>
          </div>
        </div>

      </div>
      <div class="limit-all tabflex">
        <div class="flex ">
          <div class="gate-title">
            <div class="text">超限超载检测</div>
          </div>
          <div class="tab">
            <!-- <div :class="limitTab==1?'active':''" @click="bindChangeDate(1,'limitTab')">当日</div> -->
            <div :class="limitTab==1?'active':''" @click="bindChangeDate(2,'limitTab')">昨日</div>
          </div>
        </div>
        <div class="limit" @click="bindShowDialog('limit','超限超载检测','cxczjc')">
          <div class="flex">

            <div class="flex-item">
              <div class="limit-num">{{overDetails.checkTotal}}</div>
              <div>检测车辆总数</div>
            </div>
            <div class="flex-item">
              <div class="limit-num"> {{overDetails.overLimitVehicle}}</div>
              <div>检测超限车辆</div>
            </div>
            <div class="flex-item">
              <div class="limit-num"> {{overDetails.bulkTransportation}}</div>
              <div>检测大件运输车次</div>
            </div>
          </div>

        </div>
      </div>
      <div class="construction">
        <div class="gate-title margin-bottom">
          <div class="text">专项工程</div>
        </div>
        <div class="table cursor">
          <div class="table-header">
            <div class="text-center" :style="{ flex: item.width }" v-for="(item, index) in constructionColumns" :key="index">
              {{ item.title }}
            </div>
          </div>
          <div class="table-body" @click.stop="bindShowDialog('project','专项工程','zxgc')">
            <swiper :direction="'vertical'" :slidesPerView="4" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:9.4rem">
              <swiper-slide class="table-th" v-for="(row,i) in jsonDate.zxgc" :key="row.title">
                <div class="tr">
                  <div class="td" :style="{ flex: col.width  }" v-for="(col, index) in constructionColumns" :key="index">
                    {{ row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>

    </div>

    <div class="gate-right">
      <div class="right-top tabflex">
        <div class="flex ">
          <div class="gate-title">
            <div class="text">通行费量</div>
          </div>
          <div class="tab">
            <div :class="tollTab==1?'active':''" @click="bindChangeDate(1,'tollTab')">昨日</div>
            <!-- <div :class="tollTab==2?'active':''" @click="bindChangeDate(2,'tollTab')">本月</div>
            <div :class="tollTab==3?'active':''" @click="bindChangeDate(3,'tollTab')">本季</div>
            <div :class="tollTab==4?'active':''" @click="bindChangeDate(4,'tollTab')">本年</div> -->
          </div>
        </div>
        <div class="flex fee">
          <div class="flex-item" @click="bindShowDialog('yesterday','昨日通行费量','txfl')">
            <div class="fee-top">
              <img src="../../../assets/images/icon20.png" alt="">
              <div>
                <div class="fee-title">昨日通行费(万元)</div>
                <div class="fee-num">{{unitConvert(yesterFeeNum)}}</div>
              </div>
            </div>
            <div class="fee-bottom">
              交控内排名{{feeSort}}
            </div>
            <!--<div class="fee-bottom">
              同比 <span class="red">24.06%</span>
              环比 <span class="green">11.52%</span>
            </div>-->
          </div>
          <div class="flex-item" @click="bindShowDialog('yesterday','昨日通行费量','txfl')">
            <div class="fee-top">
              <img src="../../../assets/images/icon23.png" alt="">
              <div>
                <div class="fee-title">昨日通行量(万辆)</div>
                <div class="fee-num">{{unitConvert(yesterNum)}}</div>
              </div>
            </div>
            <div class="fee-bottom">
              交控内排名 {{numSort}}
            </div>
            <!--<div class="fee-bottom">
              同比 <span class="red">13.00%</span>
              环比 <span class="green">4.93%</span>
            </div>-->
          </div>
        </div>
        <div>
          <!-- <div class="trend-title">政策性减免通行费</div> -->
          
          <div class="flex margin-bottom">
            <div class="gate-title">
              <div class="text">政策性减免通行费</div>
            </div>
            <div class="tab">
              <div :class="feePolicyTab==1?'active':''" @click="bindChangeDate(1,'feePolicyTab')">去年</div>
              <div :class="feePolicyTab==2?'active':''" @click="bindChangeDate(2,'feePolicyTab')">本年</div>
            </div>
          </div>
          <div class="policy">
            <div class="flex">
              <div class="flex-item">
                <div class="policy-num">{{unitConvert(roadDiffChargeDaySum)}} </div>
                <div class="policy-text">差异化政策优惠(万元)</div>
              </div>
              <div class="flex-item">
                <div class="policy-num">{{unitConvert(stationDayOutGreen.outGreenMoney)}}</div>
                <div class="policy-text">鲜活运输减免(万元)</div>
              </div>
            </div>
            <div class="flex">
              <div class="flex-item">
                <div class="policy-num">{{unitConvert(stationDayHoliday)}} </div>
                <div class="policy-text">节假日政策减免(万元)</div>
              </div>
              <div class="flex-item">
                <div class="policy-num">{{stationDayOutGreen.otherNum}}</div>
                <div class="policy-text">其他政策减免(万元)</div>
              </div>
            </div>

          </div>
        </div>

        <div class="trend">

          <div class="flex margin-bottom">
            <div class="gate-title">
              <div class="text">通行费量增减趋势</div>
            </div>
            <div class="tab">
              <div :class="feeTab==2?'active':''" @click="bindChangeDate(2,'feeTab')">本月</div>
              <!-- <div :class="feeTab==3?'active':''" @click="bindChangeDate(3,'feeTab')">本季</div>-->
              <!-- <div :class="feeTab==4?'active':''" @click="bindChangeDate(4,'feeTab')">本年</div> -->
            </div>
          </div>
          <div class="flex ">
            <div class="trend-title">通行费量增减趋势</div>
          </div>
          <div>
            <LineEchert v-if="echartsData.xaxis" :echartsData="echartsData" />
          </div>
          <div class="flex ">
            <div class="trend-title">划后通行费</div>
          </div>
          <div>
            <BarEchert v-if="echartsData2.xaxis" :echartsData="echartsData2" />
          </div>
        </div>
      </div>
      <div class="right-bottom tabflex">
        <div class="flex margin-bottom">
            <div class="gate-title">
              <div class="text">路段年度收费目标完成</div>
            </div>
            <div class="tab">
              <div :class="roadTab==1?'active':''" @click="bindChangeDate(1,'roadTab')">去年</div>
              <div :class="roadTab==2?'active':''" @click="bindChangeDate(2,'roadTab')">本年</div>
            </div>
          </div>
        <div v-scrollList="4000" class="sort-all">

          <div class="sort" v-for="(item,index) in annualGoal" :key="index">
            <div class="sort-tips">
              <div>{{item.name+'完成率'}}</div>
              <div>完成率:{{item.rate}}%</div>
              <div>完成值：{{unitConvert(item.finsh)}}万元</div>
            </div>
            <div class="sort-top">
              <div class="sort-title"><span v-if="index>2">{{index+1}}</span> {{item.name}}</div>
              <span class="sort-num">目标：{{unitConvert(item.percent)}}万元</span>
            </div>
            <div class="sort-bottom">
              <div class="percentage">
                <div class="core" :style="{width:item.rate>100?'100%':item.rate+'%'}"></div>
              </div>
              <div class="percentage-text">{{item.rate}}%</div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="gate-footer">

      <div class="footer-item">
        <div class="gate-title margin-bottom">
          <div class="text">收费机电</div>
        </div>
        <div class="footer-flex">
          <div class="footer-item" :class="electricTab==1?'active':''" @click="bindChangeDate(1,'electricTab')">
            <div class="footer-num" v-if="jsonDate.wxtc">227</div>
            <div class="footer-text">维修工单</div>
          </div>
          <div class="footer-item" :class="electricTab==2?'active':''" @click="bindChangeDate(2,'electricTab')">
            <div class="footer-num" v-if="jsonDate.xjtc">11552</div>
            <div class="footer-text">巡检工单</div>
          </div>
          <div class="footer-item" :class="electricTab==3?'active':''" @click="bindChangeDate(3,'electricTab')">
            <div class="footer-num" v-if="jsonDate.xjtc">1080</div>
            <div class="footer-text">保养工单</div>
          </div>
        </div>
        <div class="table cursor"
          @click.stop="bindShowDialog(electricTab==1?'repair':electricTab==2?'inspection':'maintain','收费机电',electricTab==1?'wxtc':electricTab==2?'xjtc':'bytc')">

          <div class="table-header">
            <div class="text-center" :style="{ flex:item.flex }"
              v-for="(item,index) in electricTab==1?config.feeColumns:electricTab==2?config.inspectionColumns:config.maintainColumns" :key="index">
              {{item.title}}
            </div>
          </div>
          <div class="table-body">
            <swiper :direction="'vertical'" :slidesPerView="2" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false,
            }" style="height:4.7rem">
              <swiper-slide class="table-th" v-for="(row,i) in  electricTab==1?jsonDate.wxtc:electricTab==2?jsonDate.xjtc:jsonDate.bytc" :key="row.title">
                <div class="tr">
                  <div class="td" :style="{ flex: col.flex }"
                    v-for="(col, index) in electricTab==1?config.feeColumns:electricTab==2?config.inspectionColumns:config.maintainColumns" :key="index">
                    {{ row[col.key] }}
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div>

      <div class="footer-item">
        <div class="gate-title">
          <div class="text">安全应急</div>
        </div>
        <div class="footer-flex">
          <div class="footer-item" :class="securityTab==1?'active':''" @click="bindChangeDate(1,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.zz}}</div>
            <div class="footer-text">组织</div>
          </div>
          <div class="footer-item" :class="securityTab==2?'active':''" @click="bindChangeDate(2,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.ya}}</div>
            <div class="footer-text">预案</div>
          </div>
          <div class="footer-item" :class="securityTab==3?'active':''" @click="bindChangeDate(3,'securityTab')">
            <div class="footer-num">{{jsonDate.aqyj?.dw}}</div>
            <div class="footer-text">队伍</div>
          </div>
        </div>

        <div class="table cursor"
          @click.stop="bindShowDialog(securityTab==1?'organization':securityTab==2?'reserve':'ranks','安全应急','aqyj',securityTab==1?'zztc':securityTab==2?'yatc':'dwtc')">
          <div class="table-header">
            <div class="text-center" :style="{ flex:item.flex }"
              v-for="(item,index) in securityTab==1?config.organizationColumns2:securityTab==2?config.reserveColumns2:config.ranksColumns2" :key="index">
              {{item.title}}
            </div>
          </div>
          <div class="table-body">
            <swiper :direction="'vertical'" :slidesPerView="2" :modules="modules" :autoplay="{
              delay: 2500,
              disableOnInteraction: false}" style="height:4.7rem">
              <swiper-slide class="table-th" v-for="(row,i) in securityTab==1?jsonDate.aqyj.zztc:securityTab==2?jsonDate.aqyj.yatc:jsonDate.aqyj.dwtc"
                :key="row.title">
                <div class="tr">
                  <div class="td" :class="index==0?'serial': ''" :style="{ flex: col.flex }"
                    v-for="(col, index) in securityTab==1?config.organizationColumns2:securityTab==2?config.reserveColumns2:config.ranksColumns2" :key="index">
                    {{ col.key=='serial'?(i+1):row[col.key] }}
                  </div>
                </div>

              </swiper-slide>
            </swiper>
          </div>
        </div>

      </div>

    </div>

    <div class="bottom"></div>

  </div>
  <el-dialog v-model="dialogVisible" :title="title" width="1200" class="screen-dialog" ref="fileArea">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div class="header-title">{{title}}</div>
      </div>
    </template>
    <div class="dialogCon">
      <Custable :content="tableContent" :list="tableData" :queryParams="queryParams"></Custable>
    </div>
  </el-dialog>
</template>

<script setup>
import '../../../utils/rem.js'
import moment from 'moment'
import LineEchert from "../components/lineEchert.vue";
import BarEchert from "../components/barEchert.vue";
import MapCanvas from "../components/MapCanvas.vue";
import { useTransition } from '@vueuse/core'
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import videoSrc from '@/assets/videonew/bg.mp4'
import config from './config'
import search from "@/components/Custom/search";
import Custable from "@/components/Custom/Custable";
import { listStat, getDailyStat } from "@/api/charge/audit";
import { getVideoUrl, gstRoadDiffChargeDaySum, gstStationDayHoliday, gstStationDayOutGreen, gstStationRankDept, getYesterNum, getYesterFee, getTendencyNew, getStatisticsNew, getLaneInfo, getIntroInfoJson, getPassageTendency } from '@/api/charge/gate'
import useUserStore from '@/store/modules/user'
import { getCKInfo } from '@/utils/auth'
import {  getOverLoadDetail } from "@/api/government/seeping";
import { ref } from 'vue';

const getAssetsFile = (url) => {
  return new URL(`../../../assets/images/${url}`, import.meta.url).href;
};

const router = useRouter();
const userStore = useUserStore()
let modules = [Autoplay];
const banner = [getAssetsFile('banner1.png')]
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const chineseWeekday = weekdays[moment().format('d')];
const echartsData = ref({ series: [{ data1: [], data2: [] }] })

const isFull = ref(false)
const lineInfo = ref({})

const constructionColumns = ref(config.constructionColumns)

const annualGoal = ref([{
  name: '晋蒙黄河大桥',
  target: "5195",
  percentage: 155.86
}, {
  name: '神河路',
  target: "12477",
  percentage: 141.77
}, {
  name: '神岢路',
  target: "3441",
  percentage: 123.69
}, {
  name: '原神路',
  target: "13985",
  percentage: 123.69
}, {
  name: '原太路',
  target: "60854",
  percentage: 77.15
}, {
  name: '新原路',
  target: "35753",
  percentage: 76.48
}, {
  name: '忻保路',
  target: "116995",
  percentage: 67.82
}])
const dateTab = ref(1)
const gateScale = ref(1)
const securityTab = ref(1)
const electricTab = ref(1)
const deptId = ref(Number(getCKInfo('deptId')))
const myElement = ref(null);
const VideoUrl = ref()
const carouselHeight = ref()
const myElementBox = ref(null);
const isShowConstruction = ref(true)
const isShowFullVideo = ref(false)
const tollTab = ref(1)
const feeTab = ref(2)
const feePolicyTab=ref(1)
const roadTab=ref(2)
const checkTab = ref(1)
const limitTab = ref(1)
const echartsData2 = ref({ series: [{ data1: [] }] })
const dialogVisible = ref(false);
const title = ref('')
const tableContent = ref([])
const tableData = ref()
const queryParams = ref({ pageNum: 1, pageSize: 10 })
const numSort=ref()
const feeSort=ref()

const roadDiffChargeDaySum = ref({})
const stationDayHoliday = ref({})
const stationDayOutGreen = ref({})
const coordinationList = ref({})
const yesterNum = ref({})
const tendencyData = ref({})
const yesterFeeNum = ref({})
const grandTotal = ref()
const percent=ref()
const completionRate = ref(0)
const auditInfo = ref({})
const overDetails=ref({})

const jsonDate = ref({
  aqyj: {
    zztc: [{
      "zzmc": "原平收费站安全应急领导组",
      "zzcys": "12",
      "zzfzr": "周丽青",
      "fzrdh": "13835035980"
    }],
    "yatc": [{
      "fileName": "原平收费站突发事件应急预案.doc",
    }],
    "dwtc": [{
      "dwmc": "原平站应急队伍",
      "dwcys": "55"
    }]
  },
  jdwxgd: { tc: [{ GzLevel: '重大', Gdnum: '0', wcnum: '0' }, { GzLevel: '较大', Gdnum: '0', wcnum: '0' }, { GzLevel: '一般', Gdnum: '0', wcnum: '0' }] }


})
const feeDataSource2 = ref([
  {
    serial: "日",
    locationName: "211",
    deviceName: "201",
  },
  {
    serial: "周",
    locationName: "16",
    deviceName: "16",
  },
  {
    serial: "季",
    locationName: "1",
    deviceName: "0",
  },])
const feeDataSource3 = ref([
  {
    serial: "日",
    locationName: "16",
    deviceName: "15",
  },
  {
    serial: "周",
    locationName: "3",
    deviceName: "3",
  },
  {
    serial: "季",
    locationName: "1",
    deviceName: "1",
  },])

// 统计值特效
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 500,
})
source.value = 89, 452.36

const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      getList()
      getAudit()
      getIntroDetails()
    }

  })
}
const getList = () => {
  getVideoUrl({ id: deptId.value }).then(res => {
    if (res.code == 200 && res.data && res.data.VideoUrl) {
      VideoUrl.value = res.data.VideoUrl;
      // if (VideoUrl.value.indexOf('183.203.217.212:28301') != -1 && process.env.NODE_ENV == 'development') {
      //   VideoUrl.value = res.data.VideoUrl.replace('http://183.203.217.212:28301', "/testVideo")
      // } else if (VideoUrl.value.indexOf('183.203.217.212:28301') != -1 && process.env.NODE_ENV != 'development') {
      //   VideoUrl.value = res.data.VideoUrl.replace('http://183.203.217.212:28301', "http://59.49.106.171:86")
      // }
   

     

    
    } else {
      VideoUrl.value = videoSrc
    }
  }).catch(err => {
    VideoUrl.value = videoSrc
  })
}
const gstRoadDiffChargeDaySumInit = () => {
  gstRoadDiffChargeDaySum({year:feePolicyTab.value==1?moment().subtract(1, 'years').format('YYYY'):moment().format('YYYY')}).then(res => {
    if (res.code == 200) {
      roadDiffChargeDaySum.value = res.data[0].vehMoney?res.data[0].vehMoney:0
    }
  })
}
const gstStationDayHolidayInit = () => {
  gstStationDayHoliday({year:feePolicyTab.value==1?moment().subtract(1, 'years').format('YYYY'):moment().format('YYYY')}).then(res => {
    if (res.code == 200) {
      stationDayHoliday.value =  !res.data[0]?0:res.data[0].carFee
    }
  })
}
const gstStationDayOutGreenInit = () => {
  gstStationDayOutGreen({year:feePolicyTab.value==1?moment().subtract(1, 'years').format('YYYY'):moment().format('YYYY')}).then(res => {
    if (res.code == 200) {
      stationDayOutGreen.value = res.data[0];
      stationDayOutGreen.value.otherNum = parseFloat(unitConvert(stationDayOutGreen.value.outFreeMoney) - unitConvert(stationDayOutGreen.value.outGreenMoney)).toFixed(2)

    }
  })
}
// 排行信息
const gstCoordinationListInit = () => {
  gstStationRankDept({ year:moment().subtract(1, 'years').format('YYYY')}).then(res => {
    if (res.code == 200) {
      tableData.value = res.data;
      // coordinationList.value = res.data.roadSort
    }
  })
}
// 昨日通行费量
const getYesterNumInit = () => {
  getYesterNum({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      yesterNum.value = res.data.num;
      yesterFeeNum.value = res.data.fee;
      numSort.value = res.data.numSort;
      feeSort.value = res.data.feeSort;
    }
  })
}
// 折线图
const getTendencyNumInit = () => {
  getTendencyNew({ deptId: deptId.value }).then(res => {
    if (res.code == 200) {
      tendencyData.value = res.data;
      echartsData.value.series[0].data1 = res.data.fee
      echartsData.value.series[0].data2 = res.data.num
      echartsData.value.xaxis = res.data.date
    }
  })
}
const getLine = () => {
  getLaneInfo({ id: 101 }).then(res => {
    if (res.code == 200) {
      lineInfo.value = res.data
    }
  })
}
// 路段年度收费目标完成 划后通行费
const getStatisticsInit = () => {
  getStatisticsNew({year:roadTab.value==1?moment().subtract(1, 'years').format('YYYY'):moment().format('YYYY')}).then(res => {
    grandTotal.value = res.grandTotal;
    percent.value=res.percent;
    let rate = parseFloat((unitConvert(res.grandTotal) / 248700)).toFixed(4);
    completionRate.value = parseFloat(rate * 100).toFixed(2);
    annualGoal.value = res.totalSums;
    echartsData2.value.series[0].data1 = res.monthlySums.smoney
    echartsData2.value.xaxis = res.monthlySums.mon
  })
}


const getAudit = (type) => {
  let date='';
  checkTab.value=type?type:1
  if(type==2){
   
    date =  moment().subtract(1, 'days').format("YYYY-MM-DD")
  }else{
    date = moment().format("YYYY-MM-DD")
  }
  getDailyStat({ date }).then(res => {
    if (res.code == 200) {
      auditInfo.value = res.data
    }
  })
}

function getLoadDetail() {
  getOverLoadDetail({date:moment().subtract(1, 'days').format("YYYY-MM-DD")}).then(response => {
   overDetails.value=response.data
  });
}



const init = () => {
  getDeptId()
  gstRoadDiffChargeDaySumInit()
  gstStationDayHolidayInit()
  gstStationDayOutGreenInit()
  gstCoordinationListInit()
  getYesterNumInit() //昨日通行费量
  getTendencyNumInit()// 通行费量增减趋势
  getLine()
 
  getStatisticsInit()
getLoadDetail()
  // 

}
const bindLink = (path) => {
  router.push(path);
}
const bindChangeDate = (val, name) => {
  // dateTab.value = val;
  if (name == 'tollTab') {
    tollTab.value = val;
  } else if (name == 'feeTab') {
    feeTab.value = val;
    echartsData.value = { xaxis: null, series: [{ data1: [], data2: [] }] }
    if (val == 2) {
      echartsData.value.series[0].data1 = tendencyData.value.month.fee
      echartsData.value.series[0].data2 = tendencyData.value.month.num
      echartsData.value.xaxis = tendencyData.value.month.date
    } else {
      echartsData.value.series[0].data1 = tendencyData.value.year.fee
      echartsData.value.series[0].data2 = tendencyData.value.year.num
      echartsData.value.xaxis = tendencyData.value.year.date
    }
  } else if (name == 'checkTab') {
    checkTab.value = val;
  } else if (name == 'limitTab') {
    limitTab.value = val;
  } else if (name == 'securityTab') {
    securityTab.value = val;
  } else if (name == 'electricTab') {
    electricTab.value = val;
  }else if (name == 'roadTab') {
    roadTab.value = val;
    getStatisticsInit()
  } else if (name == 'feePolicyTab') {
feePolicyTab.value = val;
    gstStationDayOutGreenInit()
    gstRoadDiffChargeDaySumInit()
    gstStationDayHolidayInit()
  } 
}


const bindShowDialog = (name, h1, table, chailder) => {

  title.value = h1;
  if (name == 'companyAll') {

  } else {
    queryParams.value = { pageNum: 1, pageSize: 10 }
    tableData.value = chailder ? jsonDate.value[table][chailder] : jsonDate.value[table].tc ? jsonDate.value[table].tc : jsonDate.value[table]

  }
  tableContent.value = config[name + 'Columns']
  dialogVisible.value = true;


}
const bindExit = () => {
  router.push("/")
}
const bindStation = () => {
  router.push("/stationScreen")
}

const getIntroDetails = () => {
  getIntroInfoJson({ stationId: deptId.value }).then(res => {
    if (res.code == 200 && res.rows && res.rows.length && res.rows[0].remark) {
      jsonDate.value = JSON.parse(res.rows[0].remark)
      jsonDate.value.aqyj.yatc.forEach(item => {
        const arr = item.yawj.split(".");
        const suffix = arr[arr.length - 1];
        item.fileName = "应急预案." + suffix
      })
      jsonDate.value.sfjd = { jdwxgd: jsonDate.value.wxgdtc, xjgd: jsonDate.value.xjtc, bygd: jsonDate.value.bytc }




    }
  })
}

const numberToCurrencyNo = (value, num) => {
  if (!value) return 0
  // 获取整数部分
  const intPart = Math.trunc(value)
  // 整数部分处理，增加,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // 预定义小数部分
  let floatPart = ''
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // 有小数部分
    floatPart = valueArray[1].toString() // 取得小数部分
    return intPartFormat + '.' + floatPart
  }
  let newNumber = intPartFormat + floatPart
  return num ? newNumber + '.00' : newNumber
}
init()



function unitConvert(num) {
  var moneyUnits = ["元", "万元", "亿元", "万亿"]
  var dividend = 10000;
  var curentNum = num;
  //转换数字
  var curentUnit = moneyUnits[0];
  //转换单位
  curentUnit = moneyUnits[1]
  curentNum = curentNum / dividend
  var m = { num: 0, unit: "" }
  m.num = curentNum.toFixed(2)
  m.unit = curentUnit;
  

  return m.num&&m.num!='NaN'?m.num:0;
}


onMounted(() => {
  carouselHeight.value = myElementBox.value.offsetHeight + 'px'
});
// 监听画面变化
window.addEventListener("resize", () => {

});
</script>

<style scoped lang="scss">
.body {
  height: calc(100vw * 0.56);
  position: relative;
  overflow: hidden;
  transform-origin: left top;
  transform: scale(1);
  background: #0a45a6 url(../../../assets/images/bg1.png) repeat 0 0;
  background-size: 60px auto;
}
.header {
  width: 100vw;
  height: 6.25rem;
  background: url(../../../assets/images/header.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;

  .title {
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    text-align: center;
    background-image: linear-gradient(
      to top,
      #8defec 0%,
      #f6fff4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .shadow {
    color: #084205;
    letter-spacing: 0.2rem;
    font-family: "CustomFont";
    font-size: 3rem;
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    z-index: 0;
    text-shadow: 5px 0px 10px #17498b;
  }
  .weather {
    width: 20.625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    left: 2rem;
    bottom: 1.2rem;
    .station-link {
      width: 2rem;
      height: 2rem;
      background: url(../../../assets/images/icon49.png) no-repeat 0 0;
      background-size: 100% auto;
      float: right;
    }
  }
  .date {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #fff;
    position: absolute;
    right: 2rem;
    bottom: 1.25rem;

    .signout {
      width: 2rem;
      height: 2rem;
      background: url(../../../assets/images/icon1.png) no-repeat 0 0;
      background-size: 100% auto;
      margin-left: 1.75rem;
    }
  }
}
.bg-left {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  left: 0;
  top: 6.25rem;
  background: url(../../../assets/images/left.png) no-repeat 0 0;
  background-size: 100% auto;
}
.bg-right {
  width: 1.375rem;
  height: 59.9375rem;
  position: fixed;
  right: 0;
  top: 6.25rem;
  background: url(../../../assets/images/right.png) no-repeat 0 0;
  background-size: 100% auto;
}

.info {
  position: fixed;
  top: 8em;
  left: 49%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info-img {
      width: 3.4375rem;
      height: 3.4375rem;
      margin: 1.25rem 0.625rem 0;
    }
    .info-num {
      font-family: "CustomFont";
      font-size: 1.875rem;
      color: #fff;
      text-shadow: 2px 0px 13px #fff;
      line-height: 1;
    }
    .info-num.text-center {
      text-align: center;
    }
    .info-text {
      font-family: Microsoft YaHei;
      color: #ccefec;
      font-size: 1rem;
    }
  }
}
.bg-center {
  width: 56.5625rem;
  height: 36.6875rem;
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: #0a45a6;
  z-index: 99;
  .full {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 9;
  }
  .close {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: 1rem;
    top: 4rem;
    z-index: 99;
  }
}
.center-video {
  width: 100vw;
  height: calc(100vw * 0.46);
  video {
    width: 100%;
    height: 100%;
  }
  .center-bg {
    // width: 100vw;
    // height: calc(100vw * 0.56);
    // text-align: center;

    // position: relative;
    // // &::after {
    // //     /* 【主要代码】 */
    // //     position: absolute;
    // //     content: '';
    // //     width: 77%;
    // //     height: 86%;
    // //     top: 0;
    // //     left: 50%;
    // //     transform: translateX(-50%);
    // //     border-radius: 100px; /* 避免四个角没有阴影 */
    // //     box-shadow: 0 0 7.75rem 13rem #132126 inset; /* 【主要代码】 */
    // //   }
    // img {
    //   height: 100%;
    //   // border-radius: 100px;
    // }
  }
  .el-carousel__container {
    height: 100% !important;
  }
}
.gate-left {
  position: fixed;
  right: 2.5rem;
  top: 6.25rem;
  z-index: 1;
}
.gate-title {
  width: 28.0625rem;
  height: 2.375rem;
  color: #fff;
  background: url(../../../assets/images/icon6.png) no-repeat 0 0;
  background-size: 96% 100%;
  padding-left: 2.25rem;
  .text {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 2.5rem;
    background-image: linear-gradient(
      to top,
      #95efed 0%,
      #f6fff4 62%,
      #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.gate-left {
  width: 28.125rem;
  .left-top {
    margin-bottom: 0.625rem;
    .top-video {
      width: 24.75rem;
      height: 16.5rem;
      border-radius: 4px;
      border: 2px solid #98edff;
      overflow: hidden;
      margin: 0.3125rem 1.875rem 0.5rem;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .top-text {
      width: 28rem;
      font-size: 0.8125rem;
      color: #ccefeb;
      padding-left: 1.25rem;
      line-height: 1.4;
      .more {
        color: #98edff;
      }
    }
    .top-staff {
      width: 27rem;
      display: flex;
      align-items: center;
      padding-left: 1.25rem;
      margin: 0.625rem 0 0.375rem;
      .staff-item {
        flex: 1;
        line-height: 2.25rem;
        margin-right: 0.625rem;
        background: url(../../../assets/images/icon8.png) no-repeat 0 0;
        background-size: 100% 100%;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #fff;
        .staff {
          font-weight: 600;
          background-image: linear-gradient(to top, #6ee5ff 0%, #ffffff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .staff-item:last-child {
        margin: 0;
      }
    }

    .top-statistics {
      width: 26.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 1.25rem;
      .statistics-item {
        width: 5.8125rem;
        height: 5rem;
        font-size: 0.875rem;
        color: #fff;
        background: url(../../../assets/images/icon7.png) no-repeat 0 0;
        background-size: 100% auto;
        text-align: center;
        margin-right: 4.5rem;
        &:last-child {
          margin-right: 0;
        }
        .statistics-num {
          font-family: "CustomNumberFont";
          line-height: 1;
          font-size: 1.5rem;
          margin: 0.625rem 0 0.3125rem;
        }
      }
    }
  }
  .left-center {
    .lane {
      display: flex;
      align-items: center;
      color: #fff;
      margin: 0.3125rem 0.9375rem;

      .lane-item {
        flex: 1;
        margin-right: 0.625rem;
        padding: 0.625rem 0 0.625rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url(../../../assets/images/icon14.png) no-repeat 0 0;
        background-size: 100% 100%;
        .lane-title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          margin-bottom: 1.125rem;
          img {
            width: 1.25rem;
            margin-right: 5px;
          }
        }
        .lane-opt {
          margin-bottom: 0.625rem;
          .opt-num {
            font-family: "CustomNumberFont";
            margin-left: 1.25rem;
            font-size: 1.25rem;
            color: #6ee5ff;
            .text-white {
              color: #fff;
            }
          }
        }
      }
    }
  }
  .left-bottom {
  }
  .holiday {
    margin-top: 1.25rem;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 0.875rem;
      .flex-item {
        width: 13.5625rem;
        display: flex;
        align-items: center;
        img {
          width: 55px;
          margin-right: 0.5rem;
        }
        .holiday-num {
          color: #e2ce4a;
          font-size: 1.5rem;
          font-weight: 600;
          span {
            font-size: 0.875rem;
          }
        }
        .holiday-text {
          font-size: 0.875rem;
          color: #fff;
          padding-left: 0.375rem;
          width: 7.25rem;
          line-height: 1.25rem;
          background: url(../../../assets/images/icon41.png) no-repeat 0 0;
          background-size: 5.5625rem 1.25rem;
        }
        &:last-child {
          .holiday-num {
            color: #4ae287;
          }
          .holiday-text {
            background: url(../../../assets/images/icon42.png) no-repeat 0 0;
            background-size: 5.5625rem 1.25rem;
          }
        }
      }
      &:last-child {
        .flex-item {
          .holiday-num {
            color: #37f7f0;
          }
          .holiday-text {
            background: url(../../../assets/images/icon43.png) no-repeat 0 0;
            background-size: 5.5625rem 1.25rem;
          }
          &:last-child {
            .holiday-num {
              color: #ffac28;
            }
            .holiday-text {
              background: url(../../../assets/images/icon44.png) no-repeat 0 0;
              background-size: 5.5625rem 1.25rem;
            }
          }
        }
      }
    }
  }

  .check-all {
    margin: 2rem 0 1rem;
    .flex {
      display: flex;
      align-items: center;
      .flex-item {
        flex: 1;
        margin-right: 0.75rem;
      }
      .flex-item:last-child {
        margin-right: 0;
      }
    }
    .check {
      width: 28.125rem;
      height: 6.25rem;
      background: url(../../../assets/images/icon28.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        .check-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
    .chase {
      width: 28.125rem;
      height: 4.375rem;
      background: url(../../../assets/images/icon29.png) no-repeat 0 0;
      background-size: 100% 100%;
      padding: 1rem 1.25rem;
      margin: 0.3125rem 0 0.5625rem;
      .flex-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ccefec;
        font-size: 0.875rem;
        .chase-num {
          font-family: CustomNumberFont;
          font-size: 1.5rem;
          color: #fff;
          // font-weight: bold;
          span {
            font-size: 1rem;
            font-weight: 100;
          }
        }
      }
    }
  }
  .limit-all {
    .limit {
      margin: 2rem 0 1rem;
      .flex {
        display: flex;
        align-items: center;
      }
      .flex-item {
        height: 6.5625rem;
        width: 11.6875rem;
        padding: 1rem 0;
        background: url(../../../assets/images/icon33.png) no-repeat 0 0;
        background-size: 100% 100%;
        font-size: 0.875rem;
        color: #ccefec;
        margin-right: 2.625rem;
        margin-bottom: 1rem;
        position: relative;
        text-align: center;
        .limit-num {
          font-family: CustomNumberFont;
          color: #fff;
          font-size: 1.5rem;
        }
      }
      .flex-item:nth-child(2n) {
        background: url(../../../assets/images/icon32.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:last-child {
        margin-right: 0;
        position: relative;
        background: url(../../../assets/images/icon31.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
      .flex-item:first-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        right: -1.5rem;
        top: 4.5rem;
      }
      .flex-item:last-child::before {
        content: "";
        display: block;
        width: 0.625rem;
        height: 0.3125rem;
        background: url(../../../assets/images/icon30.png) no-repeat 0 0;
        background-size: 100% 100%;
        position: absolute;
        left: -1.5rem;
        top: 4.5rem;
      }
    }
  }
}

.gate-footer .table {
  width: 27.1875rem;
  height: 6.25rem;
}
.table {
  width: 27.1875rem;
  // height: 10.625rem;
  box-sizing: border-box;
  .table-header {
    width: 100%;
    height: 2.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../../assets/images/icon13.png) no-repeat 0 0;
    background-size: 100% 100%;

    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
  }
  .table-th {
    .tr {
      height: 2.125rem;
      display: flex;
      align-items: center;
      color: #75ced1;

      background: url(../../../assets/images/icon18.png) no-repeat 0 0;
      background-size: 100% 100%;
      opacity: 0.7;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .serial {
        line-height: 2.125rem;
        background: url(../../../assets/images/icon15.png) no-repeat center
          center;
        background-size: 1.5rem 1.5rem;
        font-size: 1rem;
        color: #75ced1;
      }
    }
  }
  .table-th:nth-child(2n) {
    .tr {
      margin-top: 0.5px;
      background: url(../../../assets/images/icon19.png) no-repeat 0 0;
      background-size: 100% 100%;
      color: #fff;
    }
    .serial {
      background: url(../../../assets/images/icon16.png) no-repeat center center;
      background-size: 1.5rem 1.5rem;
      color: #fff;
    }
  }
  .td {
    font-size: 0.875rem;
    text-align: center;
  }
}

.gate-right {
  width: 28.125rem;
  position: fixed;
  left: 1.875rem;
  top: 6.25rem;
  z-index: 1;
  .station {
    width: 20.5rem;
    line-height: 2.875rem;
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding-left: 4rem;
    color: #eff7ff;
    background: url(../../../assets/images/icon34.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    .icon {
      width: 1.5rem;
      position: absolute;
      top: 0;
      right: 1.5rem;
    }
  }
  .flex {
    display: flex;
    align-items: center;
    .flex-item {
      flex: 1;
      margin-right: 0.75rem;
    }
    .flex-item:last-child {
      margin-right: 0;
    }
  }
  .trend {
    margin: 0 0 1rem;
  }

  .right-top {
    .trend-title {
      font-size: 1.125rem;
      color: #98edff;
    }

    .fee {
      margin-top: 1rem;
      margin-bottom: 1.25rem;
      .flex-item {
        height: 5.75rem;
        background: url(../../../assets/images/icon17.png) no-repeat 0 0;
        background-size: 100% 100%;
        .fee-top {
          display: flex;
          align-items: center;
          padding: 0.625rem 0.625rem 0.25rem;
          color: #ccefec;
          img {
            width: 1.375rem;
            height: 1.375rem;
            margin-right: 0.625rem;
          }
          .fee-num {
            font-size: 1.5rem;
            font-family: CustomNumberFont;
            margin-top: 0.375rem;
          }
        }
        .fee-bottom {
          display: flex;
          align-items: center;
          color: #ccefec;
          padding: 0 0.3rem;
          font-size: 0.75rem;
          span {
            padding-left: 0.3125rem;
            padding-right: 1rem;
          }
          span.red {
            color: #ff4e4e;
            padding-left: 0.75rem;
            position: relative;
          }
          span.red::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon25.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
          span.green {
            color: #98edff;
            padding-left: 0.75rem;
            position: relative;
          }
          span.green::before {
            content: "";
            display: block;
            background: url(../../../assets/images/icon24.png) no-repeat 0 0;
            background-size: 100% 100%;
            width: 0.4375rem;
            height: 0.5625rem;
            position: absolute;
            left: 0.25rem;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .policy {
      margin: 0.625rem 0 0;
      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .flex-item {
          flex: 1;
          height: 3.75rem;
          background: url(../../../assets/images/icon9.png) no-repeat 0 0;
          background-size: 100% 100%;
          margin-bottom: 0.625rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
          .policy-num {
            font-size: 1.5rem;
            font-weight: 600;
          }
          .policy-text {
            font-size: 0.875rem;
            color: #c7d9fc;
          }
        }
        .flex-item:last-child {
          margin-left: 1.125rem;
        }
      }
    }
    .over {
      margin-bottom: 0.98rem;
      .flex-item {
        flex: 1;
        height: 3.75rem;
        background: url(../../../assets/images/icon9.png) no-repeat 0 0;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ccefec;
        font-size: 0.875rem;
        margin-right: 0.625rem;
        margin-top: 0.625rem;
        .over-num {
          font-size: 1.5rem;
          font-family: CustomNumberFont;
          span {
            font-size: 0.875rem;
            color: #c7d9fc;
          }
        }
      }
      .flex-item:last-child {
        flex: 1.2;
        margin-right: 0;
      }
    }
  }
}
.trend,
.tabflex {
  .flex {
    justify-content: space-between;
    position: relative;

    .tab {
      position: absolute;
      right: 0;
      top: 0.375rem;
      display: flex;
      align-items: center;
      cursor: pointer;
      div {
        width: 2.5rem;
        line-height: 1.375rem;
        background: url(../../../assets/images/icon21.png) no-repeat 0 0;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.875rem;
        margin-left: 0.3rem;
      }
      div.active {
        background: url(../../../assets/images/icon22.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
}
.gate-footer {
  width: 56.25rem;
  height: 14.375rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  display: flex;
  justify-content: space-between;
}
.footer-flex {
  display: flex;
  margin: 0.5rem 0 0.625rem;
  .footer-item {
    height: 3.75rem;
    flex: 1;
    margin-right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../../../assets/images/icon36.png) no-repeat 0 0;
    background-size: 100% 100%;

    &:last-child {
      margin-right: 0;
    }
    .footer-num {
      font-size: 1.5rem;
      color: #fff;
      font-weight: 600;
    }
    .footer-text {
      font-size: 0.875rem;
      color: #fff;
      font-weight: 400;
    }
  }
}
.footer-item.active {
  background: url(../../../assets/images/icon35.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.footer-item {
  width: 27.1875rem;
  .flex-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tab {
      display: flex;
      align-items: center;
      div {
        width: 2.75rem;
        line-height: 1.375rem;
        background: url(../../../assets/images/icon21.png) no-repeat 0 0;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.875rem;
        margin-left: 0.625rem;
      }
      div.active {
        background: url(../../../assets/images/icon22.png) no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  }
  .list {
    margin-top: 1rem;
    height: 10.625rem;
    overflow-y: auto;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2.625rem;
      height: 2.625rem;
      .list-title {
        width: 17.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #fff;
      }
      .list-date {
        color: #bafeff;
      }
    }
  }
  .light {
    margin-top: 1rem;
    margin-bottom: 1.6875rem;
    height: 8.625rem;
    overflow-y: auto;
    .light-item {
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.375rem;
      .light-img {
        width: 6.25rem;
        height: 4.125rem;
      }
      .light-title {
        width: 18.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #fff;
        margin-bottom: 0.4rem;
        line-height: 1.6;
      }
      .light-date {
        color: #bafeff;
      }
    }
  }
}
.sort-all {
  height: 10rem;
  overflow-y: auto;
  margin-top: 1rem;
  .sort {
    margin: 0.5rem 0 1rem;
    position: relative;

    .sort-tips {
      width: 9.5rem;
      background: #fff;
      border: 1px solid #0a45a6;
      padding: 0.625rem;
      line-height: 1.6;
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      color: #333;
      font-size: 12px;
    }
    &:hover {
      .sort-tips {
        display: block;
      }
    }
    .sort-top {
      height: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.4375rem;
      .sort-title {
        color: #fff;
        font-size: 1rem;
        padding-left: 2.4rem;
        position: relative;
        span {
          color: #fff;
          font-size: 1rem;
          position: absolute;
          left: 0.6rem;
          top: 2px;
        }
        &::before {
          content: "";
          display: block;
          width: 2rem;
          height: 1.5rem;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .sort-num {
        color: #c7d9fc;
        font-size: 0.875rem;
      }
    }
    .sort-bottom {
      height: 1rem;
      background: #2056be;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem 0 1rem;
      .percentage {
        flex: 1;
        height: 2px;
        background: #1f3046;
        margin-right: 0.625rem;
        .core {
          height: 100%;
          background: radial-gradient(#2056be 0%, #4ae7ef 100%);
          border-radius: 1px 1px 1px 1px;
          position: relative;
          &::before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 4px;
            display: block;
            background: #bfffff;
            position: absolute;
            right: 0;
            top: -1px;
            box-shadow: 0 0 6px 6px rgba(255, 255, 255, 0.2);
          }
        }
      }
      .percentage-text {
        width: 3rem;
        flex-shrink: 0;
        font-size: 0.875rem;
        color: #6ee5ff;
      }
    }
    &:nth-child(1) {
      .sort-title {
        &::before {
          background: url(../../../assets/images/icon50.png) no-repeat center
            center;
          background-size: 1.5rem 1.5rem;
        }
      }
    }
    &:nth-child(2) {
      .sort-title {
        &::before {
          background: url(../../../assets/images/icon51.png) no-repeat center
            center;
          background-size: 1.5rem 1.5rem;
        }
      }
    }
    &:nth-child(3) {
      .sort-title {
        &::before {
          background: url(../../../assets/images/icon52.png) no-repeat center
            center;
          background-size: 1.5rem 1.5rem;
        }
      }
    }
  }
}

.bottom {
  width: 54.6875rem;
  height: 2.0625rem;
  background: url(../../../assets/images/bottom.png) no-repeat 0 0;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.margin-bottom {
  margin-bottom: 0.625rem;
}

::-webkit-scrollbar {
  display: none !important;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  display: none !important;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  display: none !important;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: transparent !important;
  display: none !important;
}

.header-title {
  color: #fff;
}
.dialogCon {
  height: 500px;
  overflow-y: scroll;
}


</style>


<style>
.el-dialog.screen-dialog {
  height: 37.5rem;
  background: url(../../../assets/images/icon57.png) no-repeat 0 0;
  background-size: 100% 100%;
}
.el-dialog.screen-dialog .el-table {
  background: #0c3b7e;
  --el-table-border-color: rgba(52, 96, 153, 0.5);
}
.el-dialog.screen-dialog .el-table .el-table__row {
  background: #0c3b7e;
}

.el-dialog.screen-dialog .el-table .el-table__header-wrapper th {
  background: #0c3b7e !important;
  color: #fff;
  border: 1px solid rgba(52, 96, 153, 0.5);
}
.el-dialog.screen-dialog .pagination-container {
  background: transparent;
}
.el-dialog.screen-dialog .el-select .el-input__wrapper {
  background: #0b397f;
  border: 1px solid #2c97f6 !important;
  box-shadow: none !important;
}
.el-dialog.screen-dialog .el-input.el-input--default.el-input--suffix {
  border-color: #2c97f6 !important;
  box-shadow: 0 0 0 0.0625rem var(#2c97f6, #2c97f6) inset !important;
}

.el-dialog.screen-dialog .el-form .el-form-item__label {
  color: #fff !important;
}
.el-dialog.screen-dialog .el-dialog__headerbtn {
  top: -5px !important;
}
.el-dialog.screen-dialog .el-icon.el-dialog__close {
  color: #fff !important;
  font-size: 20px !important;
}
.el-dialog.screen-dialog .el-table__body-wrapper tr:hover > td {
  background-color: rgba(250, 248, 248, 0.226) !important;
}
.el-dialog.screen-dialog .el-table__body {
  color: #fff !important;
}
</style>